import { Component, OnInit } from '@angular/core';
import { fromEvent, from, interval, timer } from 'rxjs';
import { timestamp, withLatestFrom } from 'rxjs/operators';
import { map, filter, scan, take, takeUntil, throttle } from 'rxjs/operators';

@Component({
    selector: 'app-time-rx',
    templateUrl: './rx.component.html',
    styleUrls: ['./rx.component.scss']
})
export class TimeRxComponent implements OnInit {
    constructor() { }

    ngOnInit(): void {
        const holdButton = document.querySelector('#hold');
        const mouseDown$ = fromEvent(holdButton, 'mousedown');
        const mouseUp$ = fromEvent(holdButton, 'mouseup');
        const time$ = mouseUp$.pipe(
            timestamp(),
            withLatestFrom(mouseDown$.pipe(timestamp()), (mouseUp, mouseDown) => {
                return mouseUp.timestamp - mouseDown.timestamp;
            })
        );
        time$.subscribe(ms => document.querySelector('#time').textContent = ms.toString());


        const source$ = interval(1000);
        const notifier$ = timer(2500);
        const takeUtils = source$.pipe(takeUntil(notifier$));

        var clicks = fromEvent(document, 'click');
        var result = clicks.pipe(throttle(ev => interval(1000)));
        result.subscribe(x => console.log(x));
    }
}
